<template>
	<view class="action-goods">
		<!-- 返回按钮 -->
		<u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top>
		<view class="goods-content-top">
			<view class="swiper">
				<u-swiper :list="list" autoplay indicator indicatorMode="dot" :interval="4000"
					indicatorActiveColor="#1D378B" height="38vh"></u-swiper>
			</view>
			<view class="title">{{ detail.title }}</view>
			<view class="price">￥{{ detail.price }}</view>
		</view>
		<u-gap height="10" bgColor="#fafafa"></u-gap>
		<view class="goods-content-mid">
			<view class="tips-title">商品状态</view>
			<view :class="[detail.number === 1 ? 'tips' : 'tips-two']">{{ detail.tips }}</view>
		</view>
		<u-gap height="10" bgColor="#fafafa"></u-gap>
		<view class="goods-content-detail">
			<rich-text :nodes="detail.strings"></rich-text>
		</view>
		<view class="button-background">
			<view :class="`button ${isSuccess ? 'success' : ''}`" @click="touchOffDebounce">点击购买</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<view class="text-tips" :selectable="false">{{ maskTips }}</view>
						<view class="button-box">
							<view class="button-one" @click="cancel" v-if="button_one != ''">{{ button_one }}</view>
							<view class="button-two" @click="confirm(control)">{{ button_two }}</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		goodsDetail,
		createOrder,
		Buy_YySetMeal
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 返回顶部按钮 */
				scrollTop: 0, // 返回顶部滚动值
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: '600',
					color: '#FFFFFF'
				}, // 滚动内层样式
				custom: {
					background: '#CB8F58'
				}, // 滚动外层样式

				/* 商品详情 */
				list: [], // 商品轮播图
				detail: {}, // 商品详情

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				button_one: '', // 取消按钮
				button_two: '确定', // 确定按钮
				control: 0, // 确定按钮状态
				isSuccess: false, // 禁止点击
			};
		},
		onLoad(option) {

			/* 获取商品ID */
			this.goodsID = option.id;
			this.getGoodsDetail(); // 获取商品详情信息

		},
		onShow() {

		},
		/* 返回顶部 */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {

			/* 获取商品详情信息 */
			getGoodsDetail() {
				const that = this;
				const params = {
					id: that.goodsID
				};
				goodsDetail(params).then((res) => {
					const result = res.data;
					that.list.push(result.goodsLogo);
					that.detail = {
						id: result.catId,
						number: result.goodsNum,
						title: result.goodsName,
						price: result.goodsPrice,
						tips: result.onlineStatusName,
						status: result.onlineStatus,
						strings: result.goodsContent.replace(/\<img/g,
							'<img style="width:100%;height:100%;display:block;"'),
					};
				});
			},

			/* 提交增加防抖 */
			touchOffDebounce() {
				// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
				// 第二个为延时执行函数的时间
				// 第三个是否立即执行
				this.$debounce(this.buyGoods, 1500, true);
			},

			/* 下单购买商品 */
			buyGoods() {
				const that = this;
				that.isSuccess = true;
				that.button_two = '确定';
				if (that.detail.status == 2) {
					that.showTips = true;
					that.maskTips = '商品竞价已结束，请期待下次参与!';
				} else if (that.detail.number == 0) {
					that.showTips = true;
					that.maskTips = '商品竞价已结束，请期待下次参与!';
				} else {
					const params = {
						id: that.goodsID
					};
					Fn.Loading('购买中');
					setTimeout(() => {
						Fn.LoadingOff();
						// 节流操作防止重复请求
						uni.$u.throttle(() => {
							createOrder(params).then((res) => {
								if (res.status === 1) {
									const result = res;
									that.control = 1;
									that.showTips = true;
									that.maskTips = '购买成功,请前往买单页面付款';
									that.button_two = '前去付款';
									that.button_one = '返回商城';
								} else {
									that.isSuccess = false;
									Fn.Toast(res.msg, 3, 1500);
								};
							});
						}, 1500);
					}, 300);
				};
			},

			/* 确认 */
			confirm(option) {
				this.isSuccess = false;
				if (option == 0) {
					this.showTips = false;
				} else {
					this.showTips = false;
					uni.redirectTo({
						url: '/pages/mine/buyOrder/buyOrder'
					});
				};
			},

			/* 取消 */
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #fafafa;
	// }

	// uni-page-body {
	// 	background: none;
	// }

	.action-goods {
		// padding: 0 18px;

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 55rpx 40rpx 55rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 33rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: bold;
						color: #89898C;
						word-wrap: break-word;
					}

					.button-box {
						text-align: center;
						margin-top: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 140rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 60rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 140rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}
					}
				}
			}
		}

		.goods-content-top {
			padding: 20rpx 18px;

			.swiper {
				// background-color: #FFFFFF;
			}

			.title {
				margin: 20rpx 0 26rpx 0;
				font-size: 36rpx;
				// font-weight: 600;
			}

			.price {
				font-size: 40rpx;
				font-weight: 600;
			}
		}

		.goods-content-mid {
			margin: 40rpx 0;
			padding: 0 18px;
			display: flex;
			align-items: center;

			.tips-title {
				font-size: 38rpx;
				font-weight: 600;
			}

			.tips {
				background-color: #AD4440;
				text-align: center;
				margin-left: 40rpx;
				padding: 8rpx 30rpx;
				color: #FFFFFF;
				font-size: 30rpx;
				// line-height: 50rpx;
				// text-indent: 1em;
				border-radius: 3px;
			}

			.tips-two {
				background-color: #beb2b2;
				text-align: center;
				margin-left: 40rpx;
				padding: 8rpx 30rpx;
				color: #FFFFFF;
				font-size: 30rpx;
				// line-height: 50rpx;
				// text-indent: 1em;
				border-radius: 3px;
			}
		}

		.goods-content-detail {
			// height: 600px;
			// padding-top: 20rpx;
			margin-bottom: 115rpx;
		}

		.button-background {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			background-color: #FFFFFF;
			padding: 20rpx 0;
			// border-top: 1px solid #bfbfbf;

			.button {
				width: 60vw;
				line-height: 70rpx;
				font-size: 30rpx;
				background-color: #FCEBD9;
				border-radius: 5px;
				text-align: center;
				margin: auto;
				cursor: pointer;

				&.success {
					pointer-events: none;
					cursor: default;
				}
			}
		}
	}
</style>
